<template>
  <el-dialog :title="addOredit ? '创建用户' : '编辑用户'" :visible="showDialog" width="50%" @close="btnCancel">
    <!-- 表单 -->
    <el-form label-width="120px" ref="companyForm" :model="companyAddData" :rules="rules">
      <el-form-item label="企业名称" prop="shortName">
        <el-input style="width:80%" placeholder="请输入企业名称" v-model="companyAddData.shortName" />
      </el-form-item>
      <el-form-item label="所属公司" prop="company">
        <el-input style="width:80%" placeholder="请输入所属公司" v-model="companyAddData.company" />
        <p>
          https://www.tianyancha.com （在此可查询所属公司全称及简称）
        </p>
      </el-form-item>
      <el-form-item label="城市地区" prop="province">
        <el-select style="width:39%; margin-right: 10px;" placeholder="请选择" v-model="companyAddData.province" @focus="getProvinceList" @change="getCityList">
        <el-option v-for="(item,index) in provinceList"
          :key="index"
          :value="item" />
        </el-select>
        <el-select style="width:39%" placeholder="请选择" v-model="companyAddData.city">
          <el-option  v-for="(item,index) in cityList"
          :key="index"
          :label="item"
          :value="item" />
        </el-select>
      </el-form-item>
      <el-form-item label="方向(企业标签)" prop="tags">
        <el-input style="width:80%" placeholder="请输入" v-model="companyAddData.tags" />
      </el-form-item>
      <el-form-item label="备注" prop="remarks">
        <el-input style="width:80%" placeholder="请输入" type="textarea" :rows="3" v-model="companyAddData.remarks" />
      </el-form-item>
    </el-form>
    <!-- footer插槽 -->
    <template v-slot:footer>
      <el-row type="flex" justify="end">
          <el-button size="small" @click="btnCancel">取消</el-button>
          <el-button type="primary" size="small" @click="btnOK">确定</el-button>
      </el-row>
    </template>
  </el-dialog>
</template>

<script>
// 导入获取城市方法
import { provinces, citys } from '@/api/hmmm/citys.js'
// 引入接口
import { add, update } from '@/api/hmmm/companys1.js'
export default {
  name: 'CompanyAdd',
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    addOredit: {
      type: Boolean
    }
  },
  data () {
    return {
      // 定义表单数据
      companyAddData: {
        isFamous: true,
        shortName: '',
        company: '',
        province: '',
        city: '',
        tags: '',
        remarks: ''
      },
      // 校验规则
      rules: {
        shortName: [{ required: true, message: '请输入企业名称', trigger: 'blur' }],
        company: [{ required: true, message: '请输入所属公司', trigger: 'blur' }],
        province: [{ required: true, message: '请输入城市地区', trigger: 'blur' }],
        tags: [{ required: true, message: '请输入企业方向', trigger: 'blur' }],
        remarks: [{ required: true, message: '请输入备注', trigger: 'blur' }]
      },
      // 存城市数据
      provinceList: [],
      // 存地区数据
      cityList: []
    }
  },
  methods: {
    // 获取城市列表
    getProvinceList () {
      this.provinceList = provinces()
    },
    // 获得地区列表
    getCityList (val) {
      this.cityList = citys(val)
      this.companyAddData.city = this.cityList[0]
    },
    // 点击确定提交，新增接口，通知父组件拉数据渲染，关闭弹层
    async btnOK () {
      await this.$refs.companyForm.validate()
      // 区分新增和编辑的场景
      if (this.addOredit) {
        // 新增
        await add(this.companyAddData)
      } else {
        // 编辑
        this.companyAddData.isFamous = true
        await update(this.companyAddData)
      }
      this.$message.success(`${this.addOredit ? '添加' : '修改'}成功！`)
      this.$parent.getCompanyDataList()
      this.$emit('update:showDialog', false)
    },
    // 点击取消，关闭弹层，清空表单，清除表单校验
    btnCancel () {
      this.$refs.companyForm.resetFields()
      this.companyAddData = {
        isFamous: true,
        shortName: '',
        company: '',
        province: '',
        city: '',
        tags: '',
        remarks: ''
      }
      this.$emit('update:showDialog', false)
    }
  }
}
</script>

<style>

</style>
